<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_head.html"; ?>



<h2>폴더구조 및 명명규칙(수정중)</h2>

<h3>1. 프로젝트 개요 및 폴더구조</h3>
<ul class="notice-txt">
    <li>별도로 첨부된 문서를 참조한다(BSIB_퍼블_개요역할.pdf, BSIB_퍼블_환경세팅.pdf, BSIB_퍼블_디렉토리구조.pdf)</li>
    <li>반드시 디렉토리구조에 따라서 작업한다</li>
	<li>html 파일명과 경로는 IA구조에서 정해진 규칙대로 명명한다</li>
	<li>css 파일명은 공통 css 를 제외하고, 기본적으로 사이트구분명(폴더명)을 따라가도록 한다</li>
</ul>



<h3>2. 아이디(id)</h3>
<table class="tbl-type" cellspacing="0" cellpadding="0" summary="아이디 네이밍 규칙 예">
	<thead>
		<tr>
			<th>잘못된 예</th>
			<th>올바른 예</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>error_Mesage</td>
			<td>errorMesage</td>
		</tr>
		<tr>
			<td>control_center</td>
			<td>controlCenter</td>
		</tr>
		<tr>
			<td>checkbox_3</td>
			<td>checkbox-3</td>
		</tr>
	</tbody>
</table>
<ul class="notice-txt">
	<li>시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(<strong>카멜 케이스</strong>)을 사용한다.</li>
	<li>동일한 이름의 id는 문서에서 한번만 사용이 가능하다.</li>
	<li>레이아웃을 제외한 스타일 지정을 위하여 id를 사용하지 않는다.</li>
	<li>앵커로서 사용되는 엘리먼트는 id 지정이 가능하다.</li>
	<li>User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.</li>
	<li>예약어가 있는 경우 예약어를 사용한다.</li>
</ul>
<h5 class="guide">레이아웃 및 동작을 위한 DOM 예약어</h5>
<table class="tbl-type" cellspacing="0" cellpadding="0" summary="레이아웃 예약어">
	<thead>
		<tr>
			<th width="150">예약어</th>
			<th>설명</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#wrap</td>
			<td>페이지 전체 영역 그룹핑</td>
		</tr>
		<tr>
			<td>#skipNav</td>
			<td>접근성을 위한 건너뛰기 메뉴</td>
		</tr>
		<tr>
			<td>#topNav</td>
			<td>화면 최상단영역의 메뉴</td>
		</tr>
		<tr>
			<td>#siteNav</td>
			<td>사이트별 네비게이션 영역의 메뉴</td>
		</tr>
		<tr>
			<td>#gnbNav</td>
			<td>글로벌 네비게이션 영역 메뉴</td>
		</tr>
		<tr>
			<td>#quick</td>
			<td>빠른 바로가기 영역의 메뉴</td>
		</tr>
		<tr>
			<td>#container</td>
			<td>본문영역 그룹핑</td>
		</tr>
		<tr>
			<td>#lnbNav</td>
			<td>로컬 네비게이션 영역의 메뉴</td>
		</tr>
		<tr>
			<td>#contentWrap</td>
			<td>LNB가 존재할때 컨텐츠영역과 pathNav 영역을 감싸는 div</td>
		</tr>
		<tr>
			<td>#contentWrapMain</td>
			<td>LNB가 없을때 컨텐츠영역과 pathNav 영역을 감싸는 div</td>
		</tr>
		<tr>
			<td>#pathNav</td>
			<td>현재 페이지 위치표시</td>
		</tr>
		<tr>
			<td>#content</td>
			<td>주요컨텐츠(서비스화면) 영역</td>
		</tr>
		<tr>
			<td>#directNav</td>
			<td>하단 바로가기 영역의 메뉴</td>
		</tr>
		<tr>
			<td>#footer</td>
			<td>바닥글</td>
		</tr>
	</tbody>
</table>





<h3>3. 클래스(class)</h3>

<table class="tbl-type" cellspacing="0" cellpadding="0" summary="클래스 네이밍 규칙 예">
	<caption>클래스 네이밍 규칙 예</caption>
	<thead>
		<tr>
			<th>잘못된 예</th>
			<th>올바른 예</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>error-Mesage</td>
			<td>error-mesage</td>
		</tr>
		<tr>
			<td>control_center</td>
			<td>control-center</td>
		</tr>
		<tr>
			<td>table-list-type-3</td>
			<td>tbl-lt-3</td>
		</tr>
		<tr>
			<td>article-1, article-2, article-3</td>
			<td>article, article-2, article-3</td>
		</tr>
	</tbody>
</table>
<ul class="notice-txt">
	<li>시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.</li>
	<li>영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.</li>
	<li>하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.</li>
	<li>클래스 예약어에 숫자, 영문소문자, 하이픈(-)을 조합하여 사용할 수 있다.</li>
	<li>하이픈(-)을 이용하여 3단계를 초과하여 사용하는 방법은 지양한다.</li>
	<li>숫가자 없으면 '1'이라는 숫자가 생략된 것으로 간주한다.</li>
	<li>다중의 클래시 지정을 허용하며 최대 3개 이상 사용하지 않는다.</li>
</ul>



<h5 class="guide">공통 클래스 | IE 버전별 스타일 적용을 위한 body 클래스</h5>
<ul class="notice-txt">
	<li>브라우저의 호환성 및 css 핵의 사용을 최소화 하기 위하여 IE조건부 주석을 이용하여 body 엘리먼트에 클래스 명을 지정한다.<br />
	버전별로 ie7, ie8, ie9 클래스를 지정하여 해당 브라우저에만 적용되는 스타일을 작성할 수 있다.</li>
	<li>base.css 에 정의되어있는 공통클래스를 잘 숙지하여 활용한다.(마진,패딩 등)</li>
</ul>




<h3>4. 이미지 네이밍 규칙</h3>
<table class="tbl-type" cellspacing="0" cellpadding="0" summary="이미지 네이밍 규칙 예">
	<caption>이미지 네이밍 규칙 예</caption>
	<thead>
		<tr>
			<th width="150">잘못된 예</th>
			<th>올바른 예</th>
			<th>설명</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>on_tab_info.gif</td>
			<td>tab_info_1_on.gif</td>
			<td>형태(폴더명)_의미_순서_상태 순서로 조합한다.</td>
		</tr>
		<tr>
			<td>tio.gif</td>
			<td>tab_info_on.gif</td>
			<td>임의로 축약하지 않는다.</td>
		</tr>
		<tr>
			<td>btn_Active.gif</td>
			<td>btn_active.gif</td>
			<td>영문 소문자를 사용한다.</td>
		</tr>
		<tr>
			<td>bul_square_type2.gif</td>
			<td>bul_square_type_2.gif</td>
			<td>같은 분류의 이미지 사용시 언더스코어(_)로 구분한다.</td>
		</tr>
	</tbody>
</table>
<ul class="notice-txt">
	<li>이미지 네이밍의 조합은 '형태(폴더명)_의미_순서_상태'의 순서로 조합한다.</li>
	<li>같은 이름의 이미지가 두 개 이상 존재하면 파일 언더스코어(_)로 구분한다.</li>
	<li>이미지 네이밍은 이미지의 확장자에 관계 없이 순차적으로 적용한다. 예) btn_confirm.gif, btn_confirm_2.jpg, btn_confirm_3.png</li>
	<li>특수문자는 사용할 수 없다.</li>
	<li>이미지 예약어에 숫자, 영문소문자, 언더스코어(_)를 조합하여 사용할 수 있다.</li>
</ul>
<h5 class="guide">이미지 예약어</h5>
<table class="tbl-type center" cellspacing="0" cellpadding="0" summary="이미지 폴더별 설명">
	<caption>이미지 예약어</caption>
	<colgroup>
		<col style="width:15%" /><col style="width:15%" /><col style="width:20%" /><col style="width:auto" />
	</colgroup>
	<thead>
		<tr>
			<th>분류</th>
			<th>예약어</th>
			<th>사용 예</th>
			<th>설명</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="2">텍스트</td>
			<td>tit_*</td>
			<td>tit_leble_id.gif<br />tit_definition_list.gif<br />tit_table_th.gif</td>
			<td class="align-l">heading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트, 주로 테이블의 제목셀, dt 엘리먼트, label 엘리먼트, strong 엘리먼트에 사용</td>
		</tr>
		<tr>
			<td>txt_*</td>
			<td>txt_msg.gif<br />txt_desc_1.gif</td>
			<td class="align-l">문단의 이미지로된 텍스트에 사용</td>
		</tr>
		<tr>
			<td rowspan="3">링크요소</td>
			<td>nav_*</td>
			<td>nav_gnb_ko.gif<br />nav_gnb_login.gif<br />nav_lnb_about.gif</td>
			<td class="align-l">lnb, gnb, snb 등의 네비게이션 요소에 사용</td>
		</tr>
		<tr>
			<td>tab_*</td>
			<td>tab_style_1_on.gif<br />tab_style_1_off.gif</td>
			<td class="align-l">네비게이션 요소를 제외한 탭 메뉴 형태에 사용</td>
		</tr>
		<tr>
			<td>btn_*</td>
			<td>btn_ok.gif<br />btn_ok_2.gif<br />btn_bg_type_1.gif</td>
			<td class="align-l">버튼 형식의 a 엘리먼트, button 엘리먼트, input[type=image] 엘리먼트 요소에 사용한다. 버튼의 이미지가 배경으로 사용하여도 btn_* 예약어를 사용</td>
		</tr>
		<tr>
			<td>이미지</td>
			<td>ban_*</td>
			<td>ban_gnb_img1.gif<br />ban_gnb_img2.gif<br />ban_intro_img1.gif</td>
			<td class="align-l">배너이미지</td>
		</tr>
		<tr>
			<td>박스</td>
			<td>box_*</td>
			<td>box_type_1.gif<br />box_login.gif</td>
			<td class="align-l">grouping 목적으로 사용되는 div 엘리먼트에 주로 사용</td>
		</tr>
		<tr>
			<td>불릿</td>
			<td>bul_*</td>
			<td>box_arrow.gif<br />bul_arrow_2.gif<br />bul_square,gif</td>
			<td class="align-l">의미가 없는 요소로 사용할 수 있는 이미지로 사용.</td>
		</tr>
		<tr>
			<td>아이콘</td>
			<td>ico_*</td>
			<td>ico_download.gif<br />ico_upload.gif</td>
			<td class="align-l">의미가 있는, 설명에 대한 텍스트가 명확하지 않거나 없는 경우</td>
		</tr>
		<tr>
			<td>상태</td>
			<td>*_on<br />*_off<br />*_over</td>
			<td>tab_type_1_on.gif<br />tab_type_1_off.gif<br />tab_type_1_over.gif</td>
			<td class="align-l">활성, 비활성, 오버/포커스 상태에 대한 표현에 사용</td>
		</tr>
		<tr>
			<td>임시</td>
			<td>tmp_*<br /> _*</td>
			<td>tmp_layout_header.jpg<br />tmp_thumb_photo_1.jpg<br />_ad_main_1.jpg</td>
			<td class="align-l">임시로 레이아웃의 구조에 사용되는 이미지 또는 개발과 연동되는 부분의 썸네일 이미지, 광고영역의 이미지에 사용</td>
		</tr>
	</tbody>
</table>






<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_foot.html"; ?>